<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Segmentfault</title>

    <!-- Bootstrap core CSS -->
    <link href="./tpl/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./tpl/css/main.css">
     <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/main.css">
    <!-- Custom styles for this template -->
   

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top topnav">
      
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed btnself" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">12313</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><span class="logoself">segmentfault</span></a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right formcs" method="post">
            <div class="form-group">
              <input type="text" placeholder="姓名" class="form-control" name="username" >
            </div>
            <div class="form-group">
              <input type="password" placeholder="内容" class="form-control" name="msginfo">
            </div>
            <button type="submit" class="btn btn-success">登录</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <div class="messagebox">
      <div class="box_main">
          <?php  foreach ($data as $key => $value) { ?>
            <span href="#" class="list-group-item ">
              <h4 class="list-group-item-heading"><?php echo $value['username'] ?><a class="btn btn-danger" href="./action/delete.php?id=<?php echo $key ?>" onclick="return  confirm('确定要删除吗');"  >删除</a> <a class="btn btn-primary" href="./action/getedit.php?id=<?php echo $key ?>">修改</a></h4>
              <p class="list-group-item-text"><?php echo $value['msginfo']?></p>
            </span>

         <?php } ?>

          <?php
            $size = 1;               //每页显示多少条

            $totalCount = count( $data); //总条数

            $totalPages =  ceil( $totalCount / $size ); //总页数
            if( !isset($_GET['page']) || (intval($_GET['page']) > $totalPages ) || $_GET['page'] > $totalPages ){
               $page = 1;                //处理错误的分页事件
            }else{
               $page = $_GET['page'];
            }
            //下标从0开始 所以是 $page - 1 ,并且取 size 条
            $newData =  array_slice( $data, ( $page - 1 ) * $size , $size ); 
            $prePage = $page - 1;  //上一页
            $nextPage = $page + 1; //下一页
            $str  = '<div class="page_s">';
            $str .= ' <ul class="pagination">';
            $str .= '   <li>';
            var_dump( $newData );
            if( $page == 1 ){
              $str.= "<a href='JavaScript:void(0)' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a>";
            }else{
              $str.= "<a href='?page={$prePage}'><span aria-hidden='true'>&laquo;</span></a>";
            }
            $str .= '</li>';

            for( $i = 1; $i <= $totalPages; $i++ ){
              if( $page == $i ){
                $str.= "<li><a href='JavaScript:void(0)'>{$i}</a></li>";
              }else{
                $str.= "<li><a href='?page={$i}'>{$i}</a></li>";
              }
             
            }
            $str .= '   <li>';
            if( $page == $totalPages ){
              $str.= "<a href='JavaScript:void(0)' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a>";
            }else{
              $str.= "<a href='?page={$nextPage}'><span aria-hidden='true'>&raquo;</span></a>";
            }
            $str .= '   </li>';
            echo $str;

          ?>
          <!-- <div class="page_s">
            <ul class="pagination">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </div>  -->
      </div>
    </div>

    <div class="comment">
      <div class="msgbox">
        <form class="form-inline" action="./action/add.php" method="post">
          <div class="inputbox">
              <div class="form-group">
                <label for="exampleInputName2">昵称</label>
                <input type="text" class="form-control" id="exampleInputName2" name="username" placeholder="Jane Doe">
              </div>
            <button type="submit" class="btn btn-default">留言</button>
          </div>
            <textarea class="col-md-12 form-control luiyan" rows="5" style="width:100%" name="msginfo"></textarea>
        </form>
      </div>
    </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./tpl/js/jquery-1.7.2.js"></script>
    <script src="./tpl/js/bootstrap.min.js"></script>
    <script src="./tpl/js/ie10-viewport-bug-workaround.js"></script>
    <script src="./tpl/js/index.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
   
  </body>
</html>
